<template>
  <div>
    <!-- 子组件设置ref -->
    <echarts-generate
      ref="echarts"
      :name-data-key="`title`"
      :value-data-key="`score`"
    >
      <!-- 中间的元素设置id -->
      <div class="chart-container" id="chart-sample"></div>
    </echarts-generate>
  </div>
</template>

<script>
import EchartsGenerate from "@/components/charts/EchartsGenerate";
export default {
  name: "EchartsSample",
  data() {
    return {
      //传入的json数据
      chartData: [],
    };
  },
  created() {},
  async mounted() {
    await this.getData();
    // 测试生成图表
    // this.testGenerateChart();
    // 测试生成自定义option图表
    this.testGenerateChartWithCustomOption();
  },
  components: {
    "echarts-generate": EchartsGenerate,
  },
  methods: {
    // 测试生成图表
    testGenerateChart() {
      // 通过调用子组件的方法生成图表，设置id获取元素
      // 无法通过ref获取
      this.$refs.echarts.generateChartById(
        "chart-sample",
        this.chartData
      );
    },
    // 测试生成自定义option图表
    testGenerateChartWithCustomOption() {
      var completeOption = {
        legend: {
          orient: "vertical",
          left: "right",
          top: "center",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            label: {
              normal: {
                show: true,
                position: "inner", // 数值显示在内部
                formatter: '{c}',
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 更新组件
      this.$refs.echarts.generateChartWithCustomOption(
        "chart-sample",
        "objectData",
        "pieOption",
        this.chartData,
        completeOption
      );
    },
    async getData() {
      // this.chartData = [
      //   [
      //   {
      //     id: "physical-activity",
      //     // label
      //     title: "physical activity",
      //     // 排序
      //     sort: 0,
      //     // 分数
      //     score: 13,
      //     desc: "户外活动",
      //     // 分数
      //     point: 20,
      //   },
      //   {
      //     id: "taste",
      //     title: "taste",
      //     sort: 1,
      //     score: 20,
      //     desc: "味道",
      //     // 分数
      //     point: 30,
      //   },
      //   {
      //     id: "acceptance",
      //     title: "acceptance",
      //     sort: 2,
      //     score: 50,
      //     desc: "接受度",
      //     // 分数
      //     point: 40,
      //   },
      // ],
      // [
      //   {
      //     id: "physical1",
      //     // label
      //     title: "physical1",
      //     // 排序
      //     sort: 0,
      //     // 分数
      //     score: 11,
      //     desc: "户外活动1",
      //     // 分数
      //     point: 25,
      //   },
      //   {
      //     id: "taste1",
      //     title: "taste1",
      //     sort: 1,
      //     score: 25,
      //     desc: "味道1",
      //     // 分数
      //     point: 35,
      //   },
      //   {
      //     id: "acceptance1",
      //     title: "acceptance1",
      //     sort: 2,
      //     score: 55,
      //     desc: "接受度1",
      //     // 分数
      //     point: 45,
      //   },
      // ]
      // ];
      this.chartData = [
        {
          id: "physical1",
          // label
          title: "physical1",
          // 排序
          sort: 0,
          // 分数
          score: 11,
          desc: "户外活动1",
          // 分数
          point: 25,
        },
        {
          id: "taste1",
          title: "taste1",
          sort: 1,
          score: 25,
          desc: "味道1",
          // 分数
          point: 35,
        },
        {
          id: "acceptance1",
          title: "acceptance1",
          sort: 2,
          score: 55,
          desc: "接受度1",
          // 分数
          point: 45,
        },
      ];
    },
  },
};
</script>

<style>
.chart-container {
  position: relative;
  height: 50vh;
  overflow: hidden;
}
</style>